<template>
	<view class="lastLanmu lanmuType">
		<view v-for="items in bookInfo">
			<view class="type3BookItem" v-for="item in items" @click="goDetail" :data-book_id="item.id">
				<image class="type3BookImg" :src="item.img" mode=""></image>
				<view class="type3BookItemCon">
					<view class="type3BookName">{{item.name}}</view>
					<view class="type3BookDesc">{{item.desc}}</view>
					<view class="type3BookInfo">
						<view class="type3BookAuthor">
							{{item.author}}
						</view>
						<view class="type2BookTip" v-if="item.category">
							{{item.category}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {

		},
		methods: {
			goDetail(e){
				console.log(e);
				uni.navigateTo({
					url:'/pages/childPages/bookDetail/bookDetail?book_id='+e.currentTarget.dataset.book_id
				})
			}
		},
		props: ['bookInfo'],
	}
</script>

<style>
	.type3BookItem {
		display: flex;
		justify-content: flex-start;
		padding-bottom: 20upx;
		padding-left: 30upx;
	}

	.type3BookItemCon {
		width: 70%;
	}

	.type3BookImg {
		width: 150upx;
		height: 200upx;
		margin-right: 30upx;
	}

	.type3BookName {
		font-size: 30upx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		color: rgba(60, 60, 60, 1);
		margin-bottom: 14upx;
	}

	.type3BookDesc {
		font-size: 28upx;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		margin-bottom: 24upx;
	}

	.type3BookInfo {
		display: flex;
	}

	.type3BookAuthor {
		font-size: 24upx;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		margin-right: 16upx;
	}

	.type2BookTip {
		width: 90upx;
		height: 32upx;
		background: rgba(255, 224, 207, 1);
		border-radius: 1px;
		border: 1px solid rgba(255, 156, 104, 1);
		font-size: 10px;
		font-family: PingFangSC-Light;
		font-weight: 300;
		color: rgba(255, 96, 14, 1);
		text-align: center;

	}
</style>
